 /*
 * @description: 分享按钮
 * @Author: along
 * @Date: 2021-08-10
 * @Last Modified by: along
 * @Last Modified time: 2020-08-10
 */
<template>
    <div
        class="shareButton"
        @click="emitEvent(11)"
        v-if="isLoad"
        :style="{
            bottom: baseconfig.data.button_image ? baseconfig.style.Top + 'px' : '0px',
            left: baseconfig.data.button_image ? baseconfig.style.Left + 'px' : '0px'
        }"
    >
        <template v-if="baseconfig.data.button_image">
            <img
                :src="baseconfig.data.button_image"
                class="__button_image"
                :style="{
                    width: baseconfig.style.buttonFixed === 1 ? `${375 - baseconfig.style.mV * 2}px` : `${375 - baseconfig.style.Left * 2}px`,
                    marginTop: baseconfig.style.buttonFixed === 1 ? baseconfig.style.mH + 'px' : '0px',
                    marginBottom: baseconfig.style.buttonFixed === 1 ? baseconfig.style.mH + 'px' : '0px',
                    borderRadius: rate
                }"
            >
        </template>
        <template v-else>
            <img
                src="https://cdn.zsdx.cn/student-app/images/share__button.png"
                class="__button_logo"
            >
        </template>
    </div>
</template>

<script>
export default {
    name: 'ShareButton',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            rate: '0px 0px 0px 0px',
            isLoad: false
        };
    },
    watch: {
        //圆角单位转换
        baseconfig:  {
            handler: function (val, oldVal) {
                let rateValue = val.style.borderRadius;

                this.rate = rateValue.replace(/rpx/g, 'px');
                this.isLoad = true;
            },
            deep: true
        }
    },
    mounted () {
        this.isLoad = true;
        if(JSON.stringify(this.baseconfig.style) !== '{}') {//回填圆角
            let rateValue = this.baseconfig.style.borderRadius;

            this.rate = rateValue.replace(/rpx/g, 'px');
        }
    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.shareButton {
    // width: 375px;
    box-sizing: border-box;
    // border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    .__button_logo {
        width: 355px;
        height: 60px;
        margin: 10px;
    }
}
</style>